<template>
  <div class="board-column">
      <div class="board-column-header" style="font-size:20px;font-weight: bold;background-color: #404855;">
        {{ headerText }}
      </div>
      <div class="board-column-content" >
        <div v-for="element in list" v-if="element.enable == 1" :key="element.id">
          <div v-if="element.status == 2" class="board-item" style="background-color:#5ba13a;background: radial-gradient(circle at center, #5ba13a, green 100%, rgba(0,0,0,0));text-align: center;border-radius: 10px;color:#20252b;font-size:20px;width: 320px;" @click="handleClick(element.oper_id,element.id)">
    <!--        <i v-if="element.status == 2" class="el-icon-loading" style="color:#409EFF;font-size: 20px;"></i>
            <i v-else-if="element.status == 1" class="el-icon-s-help" style="color:#E6A23C;font-size: 20px;"></i>
            <i v-else-if="element.status == 0" class="el-icon-s-help" style="color:#909399;font-size: 20px;"></i>
            <i v-else class="el-icon-s-help" style="color:#F56C6C;font-size: 20px;"></i> -->
            {{ element.name }} <i class="el-icon-loading" style="color:#FFF;font-size: 16px;"></i>
    <!--        <el-tag v-if="element.status == 2" :key="element.id" type="success" effect="dark" style="width:200px;text-align: center;">
              {{ element.name }} <i class="el-icon-loading" style="color:#FFF;font-size: 16px;"></i>
            </el-tag>
            <el-tag v-else-if="element.status == 1" :key="element.id" type="warning" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag>
            <el-tag v-else-if="element.status == 0" :key="element.id" type="info" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag>
            <el-tag v-else :key="element.id" type="danger" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag> -->
          </div>
  
          <div v-else-if="element.status == 1" class="board-item" style="background-color:#E6A23C;background: radial-gradient(circle at center, #E6A23C, #de7f08 100%, rgba(0,0,0,0));text-align: center;border-radius: 10px;color:#20252b;font-size:20px;width: 320px;" @click="handleClick(element.oper_id,element.id)">
              {{ element.name }}
          </div>
  
          <div v-else class="board-item" style="background-color:#909399;background: radial-gradient(circle at center, #909399, gray 100%, rgba(0,0,0,0));text-align: center;border-radius: 10px;color:#20252b;font-size:20px;width: 320px;" @click="handleClick(element.oper_id,element.id)">
              {{ element.name }}
          </div>
        </div>
      </div>
  <!--    draggable
      <draggable :list="list" v-bind="$attrs" class="board-column-content" :set-data="setData">
        <div v-for="element in list" v-if="element.enable == 1" :key="element.id" class="board-item" style="text-align: center;" @click="handleClick(element.id)">
          <el-tag v-if="element.status == 2" :key="element.id" type="success" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag>
          <el-tag v-else-if="element.status == 1" :key="element.id" type="warning" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag>
          <el-tag v-else-if="element.status == 0" :key="element.id" type="info" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag>
          <el-tag v-else :key="element.id" type="danger" effect="dark" style="width:200px;text-align: center;"> {{ element.name }} </el-tag>
        </div>
      </draggable> -->
    </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    name: 'DragKanbanDemo',
    components: {
      draggable
    },
    props: {
      headerText: {
        type: String,
        default: 'Header'
      },
      options: {
        type: Object,
        default () {
          return {}
        }
      },
      list: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
      setData(dataTransfer) {
        // to avoid Firefox bug
        // Detail see : https://github.com/RubaXa/Sortable/issues/1012
        dataTransfer.setData('Text', '')
      },
      handleClick(oper_id,id) {
        this.$emit('handleClick', oper_id, id)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .board-column {
    min-width: 300px;
    min-height: 100px;
    height: auto;
    overflow: hidden;
    //background: #f0f0f0;
    border-radius: 3px;

    .board-column-header {
      height: 50px;
      line-height: 50px;
      overflow: hidden;
      padding: 0 20px;
      text-align: center;
      background: #333;
      color: #fff;
      border-radius: 3px 3px 0 0;
    }

    .board-column-content {
      height: auto;
      overflow: hidden;
      border: 10px solid transparent;
      min-height: 60px;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      border-radius: 1em;

      .board-item {
        cursor: pointer;
        width: 100%;
        height: 50px;
        margin: 5px 0;
        background-color: #fff;
        text-align: left;
        line-height: 40px;
        padding: 5px 10px;
        box-sizing: border-box;
        box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
      }
    }
  }
</style>
